<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profile</title>
<style>
.btn-file {
	position: relative;
	overflow: hidden;
}

.btn-file input[type=file] {
	position: relative;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity = 0);
	opacity: 0;
	background: red;
	cursor: inherit;
	display: block;
}

input[readonly] {
	background-color: white !important;
	cursor: text !important;
}
</style>
<script type="text/javascript">
	function processAction(action) {
		var form = document.getElementById("FileManageForm");
		var filename = document.getElementById("filename").value;
		if (filename != "") {
			form.action.value = action;
			form.submit();
		} else {
			alert("Please choose file first!!!");
		}

	}
</script>

</head>
<body class="skin-blue">
	<!-- header logo: style can be found in header.less -->
	<%@include file="Head-Banner.jsp"%>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<%@include file="Left-Banner.jsp"%>
		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side"> <!-- Content Header (Page header) -->

		<section class="content-header">
		<h1>File Managements</h1>
		</section> <!-- Main content --> <section class="content">
		<form action="file-upload-action" enctype="multipart/form-data"
			method="POST" id="FileManageForm">
			<input type="hidden" id="action" value="">
			<div>
				<input type="file" name="file1" id="filename" style="display: none">
				<input type="button" name="action" value="Upload" id="fileUpload"
					style="display: none" onclick="processAction('upload');"><br>
			</div>
		</form>
		<div style="display: block;">
			<div class="footer bg-gray"
				style="background-color: #444444; float: left; width: 100px;">
				<button type="button" class="btn bg-olive btn-block" name="action"
					onclick="filename.click()">Browse</button>
			</div>
			<div class="footer bg-gray"
				style="background-color: #444444; float: left; width: 100px; padding-left: 10px">
				<button type="submit" class="btn bg-olive btn-block" name="action"
					onclick="fileUpload.click()">Upload</button>
			</div>
		</div>

		<br>
		<br>
		<br>
		<form action="file" method="get">
			<div style="display: block; position: relative;">
				<input type="hidden" name="path" value="${requestScope.path }" />
				<div class="footer bg-gray"
					style="background-color: #444444; float: left; width: 100px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						value="delete">Delete</button>
				</div>
				<div class="footer bg-gray"
					style="background-color: #444444; float: left; width: 100px; padding-left: 10px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						value="download">Download</button>
				</div>
				<div class="footer bg-gray"
					style="background-color: #444444; float: left; width: 100px; padding-left: 10px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						value="new">New Folder</button>
				</div>
				<div class="footer bg-gray"
					style="background-color: #444444; float: left; width: 100px; padding-left: 10px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						value="share">Share</button>
				</div>
				<div class="footer bg-gray"
					style="background-color: #444444; float: left; width: 100px; padding-left: 10px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						value="move">Move</button>
				</div>
				<div class="form-group" style="float: left; padding-left: 50px;">
					<div class="input-group">
						<input type="text" class="form-control" name="txtSearch"
							form="searchForm" placeholder="File name" />
					</div>
				</div>
				<div class="form-group"
					style="float: left; width: 100px; padding-left: 15px;">
					<button type="submit" class="btn bg-olive btn-block" name="action"
						form="searchForm" value="search">Search</button>
				</div>
			</div>

			<br> <br> <br>
			<div class="form-group" style="float: left; width: 100px;">
				<button type="submit" class="btn bg-olive btn-block" name="action"
					value="up">Up</button>
			</div>
			<div class="box" style="top: 65px;">
				<div class="box-header">
					<h3 class="box-title">Your Current Files Box</h3>
				</div>
				<!-- /.box-header -->
				<div class="box-body no-padding">
					<table class="table table-condensed">
						<tr>
							<th><input type="checkbox" name="" /></th>
							<th style="width: 45%">File Name</th>
							<th style="width: 20%">Kind</th>
							<th style="width: 10%">Size</th>
							<th style="width: 15%">Date Modified</th>
						</tr>
						<c:forEach var="file" items="${fInfos}">
							<tr>

								<c:choose>
									<c:when test="${file.directory == true }">
										<td style="padding-left: 15px"><input type="checkbox"
											name="fileList" value="${file.fileName }" /></td>

										<td><a
											href='file?action=files&path=${requestScope.path}/${file.fileName}'>${file.fileName }</a></td>
										<td>
											<div class="">
												<span class=""><c:out value="folder"></c:out> </span>
											</div>
										</td>
									</c:when>
									<c:when test="${file.directory == false }">
										<td style="padding-left: 15px"><input type="checkbox"
											name="fileList" value="${file.fileName }" /></td>

										<td><c:out value="${file.fileName}"></c:out></td>
										<td>
											<div class="">
												<span class=""> <c:out value="file"></c:out>
												</span>
											</div>
										</td>
									</c:when>
								</c:choose>


								<td><span class="badge bg-yellow">${file.sizeInfo}</span></td>
								<td><span class="badge bg-red">${file.lastModifiedDate}</span></td>
							</tr>
						</c:forEach>

					</table>
				</div>
				<!-- /.box-body -->
			</div>

		</form>


		<form id="searchForm" action="login.jsp" method="post"></form>


		</section> <!-- /.content --> </aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->
</body>
</html>